<!-- 电子服务单 -->
<script setup>
import { ref, reactive, onMounted } from "vue";
import axios from "@/request";
import { useRoute, useRouter } from "vue-router";
import html2canvas from "html2canvas";

const route = useRoute();
const router = useRouter();
const pdfName = ref("myfile.pdf");
const orderInfo = ref("");
const contractItems = ref();
const imgUrl = ref();
const loading = ref(false);
const contractInfo = ref();

// 获取
const getContract = () => {
  const orderId = route.query.id;
  axios.get(`/api/contract/${orderId}`).then((result) => {
    const { status, data } = result;
    if (status === 200) {
      contractInfo.value = data;
      contractItems.value = data.items;
      orderInfo.value = data.orderInfo;
      pdfName.value = orderInfo.value.carNumber;
      loading.value = true;
      setTimeout(() => {
        createImg();
      }, 1000);
    }
  });
};
//

const createImg = async () => {
  const targetDiv = document.querySelector("#contractContent_1"); // 替换为您的div元素ID
  const contract_info = document.querySelector(".contract_info");
  html2canvas(targetDiv, {
    allowTaint: true,
    useCORS: true,
    scrollX: 0,
    scrollY: 0,
    height: targetDiv.clientHeight,
    width: targetDiv.clientWidth,
    windowWidth: contract_info.scrollWidth,
    windowHeight: contract_info.scrollHeight,
    scale: window.devicePixelRatio,
  }).then((canvas) => {
    imgUrl.value = canvas.toDataURL("image/png");
    loading.value = false;
  });
};

// 时间过滤
const formatDate = (dateString, type = "date") => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  const seconds = date.getSeconds().toString().padStart(2, "0");
  if (type === "date") {
    return `${year}-${month}-${day}`;
  } else if (type === "time") {
    return `${hours}:${minutes}:${seconds}`;
  } else if (type === "datetime") {
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  } else if (type === "年月日") {
    return `${year}年${month}月${day}日`;
  }
};

const goTo = () => {
  const orderId = route.query.id;
  router.push("/signature?id=" + orderId + "&name=" + orderInfo.value.name);
};

onMounted(() => {
  getContract();
  document.title = "电子服务单";
});
</script>

<template>
  <div
    :class="['contract_info', loading ? '' : 'contract_info_1']"
    v-loading="loading"
  >
    <div id="contractContent_1" class="print-content">
      <div
        v-if="loading"
        style="
          width: 100%;
          height: 100%;
          overflow: visible;
          font-family: 黑体;
          font-size: 14px;
          position: relative;
          z-index: 9;
        "
      >
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-bottom: 20px;
          "
        >
          <img src="/logo.png" width="100" />
          <div style="text-align: center">
            <p
              style="
                font-family: 微软雅黑;
                color: rgb(0, 0, 0);
                font-weight: bold;
                font-size: 24px;
              "
            >
              太平联动汽车服务有限公司
            </p>
            <p style="font-family: 宋体; color: rgb(0, 0, 0); font-size: 16px">
              机动车安全服务单（正本）
            </p>
          </div>
          <img src="/qr.png" alt="" srcset="" height="100" />
        </div>
        <p style="text-align: right; margin-bottom: 10px">
          服务单号：<span style="color: red"> {{ orderInfo.order }}</span>
        </p>
        <p style="margin: 10px 0">
          鉴于车辆所有人提出参加交通安全服务申请，并同意按约定支付服务金，依照参加交通安全服务的项目及对应条款和特别约定承担赔偿责任。
        </p>
        <table
          border="1"
          style="
            border-collapse: collapse;
            border-color: black;
            border-width: thin;
          "
        >
          <tbody>
            <!-- 1 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                被服务人
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                {{ contractItems.item_1 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                身份证号/统一社会信用代码
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                {{ contractItems.item_2 }}
              </td>
            </tr>
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                rowspan="5"
              >
                服务车辆情况
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                号码号牌
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_5 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                厂牌型号
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="3"
              >
                {{ contractItems.item_6 }}
              </td>
            </tr>
            <!-- 4 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                VIN码/车架号
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                {{ contractItems.item_7 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                发动机号
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                {{ contractItems.item_8 }}
              </td>
            </tr>
            <!-- 5 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                初次登记日期
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_9 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 70px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                排量/功率
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_10 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                核定载质量
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_11 }}
              </td>
            </tr>
            <!-- 6 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                车辆种类
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_12 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                使用性质
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_13 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                核定载客
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_14 }}
              </td>
            </tr>
            <!-- 7 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                新车购置价
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_15 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                行驶区域
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_16 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                已使用年限
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_17 }}
              </td>
            </tr>
            <!-- 8 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="3"
              >
                服务种类
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                不计免赔
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                服务金额/责任限额（元）
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                服务费（元）
              </td>
            </tr>
            <!-- 9 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="3"
              >
                {{ contractItems.item_18 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_19 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                {{ contractItems.item_20 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_21 }}
              </td>
            </tr>
            <!-- 10 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="3"
              >
                {{ contractItems.item_22 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_23 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                {{ contractItems.item_24 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_25 }}
              </td>
            </tr>
            <!-- 11 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="3"
              >
                {{ contractItems.item_26 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_27 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                {{ contractItems.item_28 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_29 }}
              </td>
            </tr>
            <!-- 12 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="3"
              >
                {{ contractItems.item_30 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_31 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                {{ contractItems.item_32 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_33 }}
              </td>
            </tr>
            <!-- 13 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="3"
              >
                {{ contractItems.item_34 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_35 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                {{ contractItems.item_36 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_37 }}
              </td>
            </tr>
            <!-- 14 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="3"
              >
                {{ contractItems.item_38 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_39 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                {{ contractItems.item_40 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_41 }}
              </td>
            </tr>
            <!-- 15 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="3"
              >
                {{ contractItems.item_42 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_43 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="2"
              >
                {{ contractItems.item_44 }}
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
              >
                {{ contractItems.item_45 }}
              </td>
            </tr>
            <!-- 16 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                colspan="7"
              >
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    padding: 0 5px;
                  "
                >
                  <span
                    style="
                      display: inline-block;
                      min-width: 50px;
                      cursor: pointer;
                    "
                    >服务费合计（人民币大写）:{{ contractItems.item_46 }}</span
                  >
                  <span style="display: inline-block; min-width: 50px"
                    >(￥: {{ contractItems.item_47 }}元)</span
                  >
                </div>
              </td>
            </tr>
            <!-- 17 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  font-size: 12px;
                  text-align: left;
                "
                colspan="7"
              >
                服务期间 自
                <span style="display: inline-block; min-width: 100px"
                  >{{ contractItems.item_48 }}时起</span
                >至<span style="display: inline-block; min-width: 100px"
                  >{{ contractItems.item_49 }}时止</span
                >
              </td>
            </tr>
            <!-- 18 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                rowspan="2"
              >
                特别约定
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  font-size: 12px;
                  text-align: left;
                "
                colspan="6"
              >
                【赠送】本服务合同:赠送(含有车损服务车辆)市区内非事故道路教援3次(10公里拖车1次，市区内送油1次，市区内搭电
                1次)，免费法律咨询服务4次，共计7次免费服务。无其他特别约定。
              </td>
            </tr>
            <tr></tr>
            <!-- 19 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  font-size: 12px;
                  text-align: left;
                "
                colspan="7"
              >
                服务合同争议管辖及方式：太原市晋源区人民法院诉讼
              </td>
            </tr>
            <!-- 20 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                rowspan="5"
              >
                重要提示
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  font-size: 12px;
                  text-align: left;
                "
                colspan="6"
              >
                1、本合同由服务条款、服务提示、服务单、服务批单和特别约定组成。
                2、收到本服务单、服务项目对应的服务条款后，请立即核对。如有不符或疏漏，请及时通知我司并办理变更或补充手续。
                3、请详细阅读服务种类相应的服务条款，特别是责任免除和责任处理。
                4、机动车因改装、加装、改变使用性质等导致危险程度显著增加以及转卖、转让、赠送他人的，应通知我司并办理变更手续。
                5、服务车辆发生交通事故后应立即通知我司。
                6、车辆发生服务事故应当先由交强险部分赔偿，不足部分依合同约定后进行补偿。
                7、被服务人直接或间接缴纳服务费，我司即视为被服务人已知晓服务合同规定所有内容且以阅读清楚无异议以及免除我司责任条款的内容及法律后果。
              </td>
            </tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <!-- 21 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  text-align: center;
                  font-size: 12px;
                "
                rowspan="2"
              >
                公司
              </td>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  font-size: 12px;
                  text-align: left;
                "
                colspan="6"
              >
                <p style="display: flex; justify-content: space-between">
                  <span>公司名称：太平联动汽车服务(山西)有限公司</span>
                  <span
                    >公司地址：太原市杏花岭区敦化南路96号山西省果品公司第15幢第二段622号</span
                  >
                </p>
                <p style="display: flex; justify-content: space-between">
                  <span>邮编：518000</span>
                  <span></span>
                </p>
                <p style="display: flex; justify-content: space-between">
                  <span>全国统一客服电话：4006980879</span>
                  <span>签单日期：{{ formatDate(orderInfo.updatedAt) }}</span>
                  <span
                    style="
                      display: inline-block;
                      width: 200px;
                      position: relative;
                    "
                    >统筹人盖章：
                    <img
                      style="position: absolute; bottom: -30px; right: 10px"
                      width="200"
                      height="200"
                      src="/cachet.png"
                      alt=""
                      srcset=""
                    />
                  </span>
                </p>
              </td>
            </tr>
            <tr></tr>
            <!-- 22 -->
            <tr>
              <td
                style="
                  padding: 0 5px;
                  min-width: 60px;
                  height: 25px;
                  font-size: 12px;
                  text-align: left;
                "
                colspan="7"
              >
                <div style="display: flex; justify-content: space-between">
                  <span>审核：用户扫码支付</span> <span>制单：王灿</span>
                  <span>经办：王灿</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          style="
            display: flex;
            flex-direction: column;
            align-content: center;
            flex-wrap: wrap;
            margin: 20px 0;
          "
        >
          <p style="position: relative; margin-top: 50px">
            参统人签单处:
            <span
              style="
                display: inline-block;
                width: 100px;
                border-bottom: 1px solid #000;
              "
            ></span>
            <img
              v-if="contractInfo.signature"
              style="
                position: absolute;
                z-index: 9;
                left: 130px;
                bottom: -50px;
                transform: rotate(-90deg);
              "
              width="80"
              :src="contractInfo.signature"
            />
          </p>
          <p>
            日期: <span style="padding: 0 15px">年</span
            ><span style="padding: 0 15px">月</span
            ><span style="padding: 0 15px">日</span>
          </p>
        </div>
      </div>
    </div>
    <img class="contract_img" :src="imgUrl" alt="" srcset="" />
    <div style="position: absolute; bottom: 40px; left: 20px; right: 20px">
      <el-button style="width: 100%" size="large" type="primary" @click="goTo"
        >点击签字</el-button
      >
    </div>
  </div>
</template>

<style scoped>
.contract_info {
  padding: 20px;
  /* width: 100vw;
  height: 100vh; */
  box-sizing: border-box;
  position: relative;
  overflow: auto;
}

.print-content {
  width: 600px;
  height: 100%;
  /* overflow: visible; */
  font-family: 黑体;
  font-size: 14px;
}

.contract_info_1 {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
.contract_img {
  width: 90%;
  position: absolute;
  top: 20px;
  /* z-index: 9; */
}
</style>
